<template id="tmp-item-stats-select">
    <div style="margin-bottom: 5px;">
        <el-input placeholder="请输入内容" type="number" min="0" max="99999" v-model="stat_value" class="input-with-select" @change="change_value">
            <el-select v-model="stat_tpye" slot="prepend" placeholder="请选择" @change="change_type">
              <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
            </el-option>
            </el-select>
        </el-input>
    </div>
</template>
<script>
    Vue.component("component-item-stats-select", {
        template:"#tmp-item-stats-select",
        props:["stat_tpye","stat_value"],
        data() {
            return {
                options:[
                    { value: 0,  name: '魔法 MANA' },
                    { value: 1,  name: '生命 HEALTH' },
                    { value: 3,  name: '敏捷 AGILITY' },
                    { value: 4,  name: '力量 STRENGTH' },
                    { value: 5,  name: '智力 INTELLECT' },
                    { value: 6,  name: '精神 SPIRIT' },
                    { value: 7,  name: '耐力 STAMINA' },
                    { value: 12, name: '防御技能等级 DEFENSE_SKILL_RATING' },
                    { value: 13, name: '躲闪等级 DODGE_RATING' },
                    { value: 14, name: '格挡等级 PARRY_RATING' },
                    { value: 15, name: '盾牌格挡等级 BLOCK_RATING' },
                    { value: 16, name: '近战命中率 HIT_MELEE_RATING' },
                    { value: 17, name: '远程命中率 HIT_RANGED_RATING' },
                    { value: 18, name: '法术命中率 HIT_SPELL_RATING' },
                    { value: 19, name: '近战暴击等级 CRIT_MELEE_RATING' },
                    { value: 20, name: '远程暴击等级 CRIT_RANGED_RATING' },
                    { value: 21, name: '法术暴击等级 CRIT_SPELL_RATING' },
                    { value: 22, name: '近战命中躲闪等级 HIT_TAKEN_MELEE_RATING' },
                    { value: 23, name: '远程命中躲闪等级 HIT_TAKEN_RANGED_RATING' },
                    { value: 24, name: '法术命中躲闪等级 HIT_TAKEN_SPELL_RATING' },
                    { value: 25, name: '近战致命躲避等级 CRIT_TAKEN_MELEE_RATING' },
                    { value: 26, name: '远程致命躲避等级 CRIT_TAKEN_RANGED_RATING' },
                    { value: 27, name: '法术爆击躲避等级 CRIT_TAKEN_SPELL_RATING' },
                    { value: 28, name: '近战加速等级 HASTE_MELEE_RATING' },
                    { value: 29, name: '远程加速等级 HASTE_RANGED_RATING' },
                    { value: 30, name: '法术急速等级 HASTE_SPELL_RATING' },
                    { value: 31, name: '命中等级 HIT_RATING' },
                    { value: 32, name: '暴击等级 CRIT_RATING' },
                    { value: 33, name: '命中躲避等级 HIT_TAKEN_RATING' },
                    { value: 34, name: '暴击躲避等级 CRIT_TAKEN_RATING' },
                    { value: 35, name: '韧性等级 RESILIENCE_RATING' },
                    { value: 36, name: '急速等级 HASTE_RATING' },
                    { value: 37, name: '精准等级 EXPERTISE_RATING' },
                    { value: 38, name: '攻击强度 ATTACK_POWER' },
                    { value: 39, name: '远程攻击强度 RANGED_ATTACK_POWER' },
                    { value: 40, name: '猫、熊、巨熊和Moonkin形态的攻击强度(3.3版本未使用) FERAL_ATTACK_POWER (not used as of 3.3)' },
                    { value: 41, name: '法术治疗效果 SPELL_HEALING_DONE' },
                    { value: 42, name: '法术伤害 SPELL_DAMAGE_DONE' },
                    { value: 43, name: '法力回复 MANA_REGENERATION' },
                    { value: 44, name: '护甲穿透等级 ARMOR_PENETRATION_RATING' },
                    { value: 45, name: '法术能量 SPELL_POWER' },
                    { value: 46, name: '生命回复 HEALTH_REGEN' },
                    { value: 47, name: '法术穿透 SPELL_PENETRATION' },
                    { value: 48, name: '盾牌格挡值 BLOCK_VALUE' },
                ]
            };
        },
        mounted() {

        },
        watch:{
        },
        methods:{
            change_type(val){
                console.log(val);
                this.$emit("update:stat_tpye",val);   //:c.sync
                // this.$emit("input",val);        //v-model,必须是value
            },
            change_value(val){
                this.$emit("update:stat_value",val);   //:c.sync
                // this.$emit("input",val);        //v-model,必须是value
            }
        },
    });
</script>

<style>
    .el-input-group__prepend div.el-select .el-input__inner{
        width: 200px;
        max-width: 200px;
    }
</style>
